<html>
    <head>
        <title>SmartDial</title>
        
        <style type="text/css">
            body { background-color: #FFFFFF; }
            #txtPhoneNumber {
                background-color: #ccccaa;
                font-size: 22pt;
                font-family: Tahoma;
            }
            #pnlButtons img { margin: 3px; }
        </style>   

        <script type="text/javascript">
            function onWidgetLoad() {
                var menu = widget.menu;

                var menu1001 = menu.createMenuItem(1001);
                menu1001.text = "Dial";
                menu1001.onSelect = onDial;
                menu.setSoftKey(menu1001, menu.leftSoftKeyIndex);
                
                var menu1002 = menu.createMenuItem(1002);
                menu1002.text = "About";
                menu1002.onSelect = onAbout;
                menu.append(menu1002);

                var menu1003 = menu.createMenuItem(1003);
                menu1003.text = "Clear";
                menu1003.onSelect = onClear;
                menu.append(menu1003);
            }

            function onDigit(ch) {
                txtPhoneNumber.innerHTML += ch;
            }

            function onDial() {
                window.location = 'tel:' + txtPhoneNumber.innerHTML;
            }

            function onClear() {
                txtPhoneNumber.innerHTML = '';
            }

            function onAbout() {
                alert("TODO - display about dialog...");
            }
        </script>
    </head>
    
    <body onload="onWidgetLoad();">
        <div id="txtPhoneNumber"></div>
        <div id="pnlButtons">
            <img src="dial1.png" onclick="onDigit('1');" />
            <img src="dial2.png" onclick="onDigit('2');" />
            <img src="dial3.png" onclick="onDigit('3');" />
            <img src="dial4.png" onclick="onDigit('4');" />
            <img src="dial5.png" onclick="onDigit('5');" />
            <img src="dial6.png" onclick="onDigit('6');" />
            <img src="dial7.png" onclick="onDigit('7');" />
            <img src="dial8.png" onclick="onDigit('8');" />
            <img src="dial9.png" onclick="onDigit('9');" />
            <img src="diala.png" onclick="onDigit('*');" />
            <img src="dial0.png" onclick="onDigit('0');" />
            <img src="dialp.png" onclick="onDigit('#');" />
        </div>
    </body>
</html>